<template>
	<view class="wrap">
		<tx-map v-if="showMap" :markers="markers" :circles="circles" @markertap="chooseRegion"
			@callouttap="chooseRegion"></tx-map>

		<!-- 选择列表 -->
		<u-card v-else class="card-wrap " :show-foot="false" :full="true" margin="10rpx">
			<view slot="head" class="card-head-wrap">
				<view class="card-head-left">
					<view>公共区域：{{markers.length}}个</view>
					<u-icon name="question-circle" style="margin-left:8rpx;display:flex"></u-icon>
				</view>
				<view class="card-head-right">
					<view>私有区域：{{regionMapList.length-markers.length}}个</view>
					<u-icon name="question-circle" style="margin-left:8rpx;display:flex"></u-icon>
				</view>
			</view>
			<view slot="body">
				<scroll-view scroll-y style="height: 75vh;">
					<u-cell-group>
						<u-cell-item v-for="(item,index) in regionMapList" :key="index" :title="item.name"
							@click="chooseRegion(index)"></u-cell-item>
					</u-cell-group>
				</scroll-view>
			</view>
		</u-card>

		<view class="text-center choose-model-wrap">
			<view class="choose-model" @click="chooseModel()">
				<u-icon :name="modelIcon" style="margin-right: 20rpx;" color="#fff" size="32"></u-icon>
				<text>{{modelString}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TxMap from '@/components/txmap/index.vue'
	export default {
		components: {
			TxMap
		},
		onLoad() {
			this.init()
		},
		data() {
			return {
				showMap: true,
				queryParam: {
					status: '2'
				},
				regionMapList: [],
				markers: [],
				circles: [],
				modelString: '切换列表查看',
				modelIcon: 'list-dot'
			};
		},
		methods: {
			chooseModel() {
				this.showMap = !this.showMap
				this.modelString = this.showMap ? '切换列表查看' : '切换地图查看'
				this.modelIcon = this.showMap ? 'list-dot' : 'map'
			},
			chooseRegion(index) {
				let regionId = this.regionMapList[index].regionId
				this.$u.api.regionData.chooseRegion({
					regionId: regionId
				}).then(res => {
					if (res.data) {
						uni.showToast({
							title: '选择地区成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/platform/home/index'
							});
						}, 500)
					} else {
						uni.showToast({
							title: '选择失败',
							icon: 'none'
						})
					}

				})
			},
			init() {
				this.$u.api.regionMapData.list(this.queryParam).then(res => {
					this.regionMapList = res.data
					this.setData(res.data)
					// console.log(res);
				})
			},
			setData(data) {
				if (data.length > 0) {
					let id = 0
					data.forEach(item => {
						if (item.isPrivate === '0') {
							this.setMarkers(item, id)
							this.setCircles(item)
							id++
						}
					})
				}
			},
			setCircles(item) {
				let circleItem = {}

				//圆型区域范围
				circleItem.latitude = item.latitude
				circleItem.longitude = item.longitude
				circleItem.radius = item.range
				circleItem.level = "abovelabels"

				if (item.scale > 8) {
					circleItem.color = '#7cb5ec44' //描边的颜色
					circleItem.fillColor = '#7cb5ec44' //填充颜色
				} else if (item.scale > 3 && item.scale <= 7) {
					circleItem.color = '#7cb5ec22' //描边的颜色
					circleItem.fillColor = '#7cb5ec22' //填充颜色
				}

				this.circles.push(circleItem)
			},
			setMarkers(item, id) {

				let markerItem = {}
				let callout = {}

				markerItem.id = id
				markerItem.latitude = item.latitude
				markerItem.longitude = item.longitude
				markerItem.title = item.name
				markerItem.scale = item.scale
				markerItem.height = 32
				markerItem.width = 32 //不生效
				markerItem.joinCluster = true
				markerItem.iconPath = '/static/platform/icons/location32_32_2.png'

				callout.id = id
				callout.anchorY = item.longitudinalOffset / 2 - 20
				callout.anchorX = item.lateralOffset
				// callout.display = item.display
				callout.display = "ALWAYS"
				callout.fontSize = 18
				callout.padding = item.padding + 10
				callout.content = item.name
				callout.bgColor = "#FFFFFFCC" //背景色
				markerItem.callout = callout

				this.markers.push(markerItem)


			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		align-items: center;
		flex: 1;
	}

	.card-wrap {
		padding: 1px;
	}


	.card-head-wrap {
		display: flex;
		flex: 1
	}

	.card-head-right {
		display: flex;

	}

	.card-head-left {
		display: flex;
		flex: 2
	}

	.choose-model-wrap {
		width: 450rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50rpx;
		margin: auto;
		z-index: 999;
	}

	.choose-model {
		border-radius: 100rpx;
		background-color: $u-type-primary;
		color: #fff;
		font-size: 28rpx;
		height: 65rpx;
		line-height: 65rpx;
	}
</style>